$root:"/static/images/";
$color: #08bbc8;

@function g($px) {
  @return ($px / 2) * 1px;
}
@mixin dpr($property,$val1,$val2:false){
  @if $val2{
    [data-dpr="1"] & {
      #{$property}: $val1/2*1px  $val2/2*1px;
    }

    [data-dpr="2"] & {
      #{$property}: $val1*1px $val2*1px;
    }

    [data-dpr="3"] & {
      #{$property}: $val1 /2*3*1px $val2/2*3*1px;
    }
  }@else {
    [data-dpr="1"] & {

      #{$property}: $val1/2*1px;
    }

    [data-dpr="2"] & {
      #{$property}: $val1*1px;
    }

    [data-dpr="3"] & {
      #{$property}: $val1 /2*3*1px;
    }
  }

}
%imgB{
  display:block; border:none;
}





//旋转
@mixin rotate($deg){
  -webkit-transform:rotate($deg*1deg); -moz-transform:rotate($deg*1deg); -ms-transform:rotate($deg*1deg); -o-transform:rotate($deg*1deg); transform:rotate($deg*1deg);
}

//backgroundSize;
@mixin bsg($w,$h){
  background-size:g($w) g($h);
  -webkit-background-size:g($w) g($h);
}

//background;
@mixin bg($img){
  background-image:url($root + $img);
  background-repeat:no-repeat;
  background-size:100% 100%;
}

//flexbox
%flex_box{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
}

%flex{
  flex:1;
  -webkit-box-flex:1;
  -webkit-flex:1;
  -ms-flex:1;
  flex:1;
}


//文字超过2行
%ov2{
  overflow: hidden;
  text-overflow:
          ellipsis;display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

%tsfR135{
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  transform: rotate(135deg);
}

%tsfR-135{
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
%tsfR45{
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
%tsfR-45{
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
%tsfR90{
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
}
%tsfR-90{
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

%tsf50{
  -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%);
  position:absolute;
  top:50%; left:50%;
}
%tsfY50{
  -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%);
  position:absolute;
  top:50%;
}
%tsfX50{
  -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); transform:translateX(-50%);
  position:absolute;
  left:50%;
}

%brs50{
  -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;
}


//垂直居中
%verAC{
  @extend %flex_box;
  -ms-flex-align:center;
  -webkit-box-align:center;
  box-align:center;
  -webkit-align-items:center;
  align-items:center;
}
//垂直左右居中
%item_alignCenter{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-pack:center;
  -webkit-box-pack:center;
  box-pack:center;
  -webkit-justify-content:center;
  justify-content:center;
  -ms-flex-align:center;
  -webkit-box-align:center;
  box-align:center;
  -webkit-align-items:center;
  align-items:center;
}
//层布局居中
%box_alignCenter{
  position:fixed;
  left:0;
  top:0;
  z-index:999;
  width:100%;
  height:100%;
  @extend %item_alignCenter;
}

$car:"http://img.autostreetscdn.com/m/src/images/xj_no_pic.jpg";
%after{
  content: '';
  display: block;
  width: 100%;
}

%placeholderBg{
  background-image:url($car);
  background-repeat:no-repeat;
}

%imgWrap{
  position:relative;
  img{
    position:absolute;width:100%; height:100%;
    left:0;top:0;
  }
  &:after{
    @extend %after;
    @extend %placeholderBg;
    background-size:100% 100%;
  }
}

@mixin placeholderBg($url,$pt){
  &:after{
    background-image:url($url);
    padding-top:$pt;
  }
}


@mixin whj($w,$h){
  width:$w+px;
  height:$h+px;
}



%right-arr{
  position:absolute;
  border-right:1px solid #d0d0d0;
  border-bottom:1px solid #d0d0d0;
  width:g(15); height:g(15);
  right:g(30);
  -webkit-transform:translateY(-50%) rotate(-45deg); -moz-transform:translateY(-50%) rotate(-45deg); -ms-transform:translateY(-50%) rotate(-45deg); -o-transform:translateY(-50%) rotate(-45deg); transform:translateY(-50%) rotate(-45deg);
  top:50%;
}